<template>
	<view class="page-header" :style="{ 'background': background, 'height': `${height}rpx` }">
		<view class="page-title">
			<view class="">
			</view>
			<view :style="{ 'color': titleColor }">{{ title }}</view>
			<view class="">
				<view></view>
			</view>
		</view>
		<!-- 操作 -->
		<view class="mh-operation">
			<head-operation-light :bgColor="bgColor" @leftIconClick="leftIconClick" @rightIconClick="rightIconClick"></head-operation-light>
		</view>
	</view>
</template>

<script>
	import headOperationLight from '../headOperation/headOperationLight.vue'
	export default {
		components: {
			headOperationLight
		},
		props: {
			title: {
				type: String,
				default: ''
			},
			background: {
				type: String,
				default: '#ffffff'
			},
			titleColor: {
				type: String,
				default: '#333333'
			},
			height: {
				type: Number,
				default: 176
			},
		},
		data() {
			return {
				bgColor: "rgba(0, 0, 0, 0.5)"
			}
		},
		methods: {
			leftIconClick() {
				this.$emit('leftIconClick')
			},
			rightIconClick() {
				this.$emit('rightIconClick')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-header {
		color: #333333;
		box-shadow: 0rpx 0rpx 14rpx #c3c3c3;
		height: 176rpx;
		display: flex;
		align-items: flex-end;
		z-index: 1;

		.page-title {
			flex: 1;
			font-size: 40rpx;
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			line-height: 1;
			padding: 0 0 24rpx;
			font-weight: 500;
			height: 100%;
		}

		.mh-operation {
			// position: absolute;
			position: fixed;
			z-index: 99999;
			top: 105.4rpx;
			right: 26.7rpx;
		}
	}
</style>
